<!DOCTYPE html>
<html>
<head>
    <title>Fig. 1.53 Capacitor-Resistor Circuit</title>
</head>
<body>
    <canvas id="canvas" width="550" height="450"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // --- Style setup ---
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 3;
        ctx.lineCap = 'round';
        ctx.font = '22px serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Draw Resistor Block and Resistor R ---
        function drawResistor() {
            // Resistor Block
            ctx.strokeRect(60, 180, 80, 130);

            // Resistor Symbol
            ctx.beginPath();
            ctx.moveTo(100, 180);
            ctx.lineTo(100, 195);
            ctx.lineTo(85, 207.5);
            ctx.lineTo(115, 232.5);
            ctx.lineTo(85, 257.5);
            ctx.lineTo(115, 282.5);
            ctx.lineTo(100, 295);
            ctx.lineTo(100, 310);
            ctx.stroke();

            // Label R
            ctx.fillText('R', 35, 245);
        }

        // --- Draw Capacitor Housing ---
        function drawCapacitorBody() {
            ctx.beginPath();
            ctx.moveTo(280, 120);
            ctx.lineTo(480, 120);
            ctx.lineTo(480, 360);
            ctx.lineTo(230, 360);
            ctx.lineTo(230, 230);
            ctx.lineTo(290, 230); // Ledge for 'h'
            ctx.moveTo(280, 120);
            ctx.lineTo(280, 170); // Left wall of upper part
            ctx.stroke();
        }

        // --- Draw Capacitor Plates ---
        function drawPlates() {
            ctx.beginPath();
            // Plate P''
            ctx.moveTo(440, 120);
            ctx.lineTo(440, 60);
            ctx.fillText('P\u2033', 440, 45);

            // Plate P'
            ctx.moveTo(320, 120);
            ctx.lineTo(320, 60);
            ctx.fillText('P\u2032', 320, 45);

            // Plate P (movable)
            ctx.moveTo(380, 70);
            ctx.lineTo(380, 140);
            ctx.fillText('P', 380, 55);
            ctx.stroke();
        }

        // --- Draw Connection from Plate P and Bellows ---
        function drawConnectionAndBellows() {
            ctx.beginPath();
            // S-curve from plate P
            ctx.moveTo(380, 140);
            ctx.bezierCurveTo(350, 190, 310, 160, 280, 180);
            
            // Bellows (r)
            const bx = 280, by = 180;
            const blen = 50, bamp = 5, bseg = 4;
            ctx.moveTo(bx, by);
            ctx.lineTo(bx - 5, by - 5);
            ctx.lineTo(bx - 15, by + 5);
            ctx.lineTo(bx - 25, by - 5);
            ctx.lineTo(bx - 35, by + 5);
            ctx.lineTo(bx - 45, by - 5);
            ctx.lineTo(bx - blen, by);
            ctx.stroke();

            // Label r
            ctx.fillText('r', 255, 205);
        }

        // --- Draw Circuit Connections and Labels V0, h ---
        function drawConnectionsAndLabels() {
            // Connection from bellows to resistor block
            ctx.beginPath();
            ctx.moveTo(230, 180); // End of bellows
            ctx.lineTo(140, 180); // Connect to resistor block right side
            ctx.stroke();

            // Connection from housing to resistor block
            ctx.beginPath();
            ctx.moveTo(230, 310); // Point on the housing wall
            ctx.lineTo(140, 310); // Connect to resistor block right side
            ctx.stroke();

            // V0 Label
            ctx.beginPath();
            ctx.moveTo(160, 190);
            ctx.arcTo(150, 205, 160, 220, 15);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(160, 300);
            ctx.arcTo(150, 285, 160, 270, 15);
            ctx.stroke();
            ctx.fillText('V\u2080', 185, 245);

            // h Label
            ctx.beginPath();
            const h_x = 320;
            const h_top_y = 180; // Approx bottom of S-curve
            const h_bottom_y = 230; // Ledge
            ctx.moveTo(h_x, h_top_y);
            ctx.lineTo(h_x, h_bottom_y);
            // Ticks
            ctx.moveTo(h_x - 5, h_top_y);
            ctx.lineTo(h_x + 5, h_top_y);
            ctx.moveTo(h_x - 5, h_bottom_y);
            ctx.lineTo(h_x + 5, h_bottom_y);
            ctx.stroke();
            ctx.fillText('h', h_x + 20, (h_top_y + h_bottom_y) / 2);
        }

        // --- Draw Figure Caption ---
        function drawCaption() {
            ctx.font = 'bold 22px serif';
            ctx.fillText('Fig. 1.53', 280, 410);
        }

        // --- Main Drawing Execution ---
        drawResistor();
        drawCapacitorBody();
        drawPlates();
        drawConnectionAndBellows();
        drawConnectionsAndLabels();
        drawCaption();
    </script>
</body>
</html>